<template>
	<div class="game-container report-container">
		<div class="params">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="80px"
			>
				<el-form-item label="操作时间:">
					<el-date-picker
						v-model="formTime.time"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						align="right"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="会员账号:">
					<el-input
						v-model="queryData.userName"
						v-symbols
						clearable
						size="medium"
						:maxlength="11"
						style="width: 280px"
						placeholder="请输入"
					></el-input>
				</el-form-item>
				<el-form-item label="账号类型:">
					<el-select
						v-model="queryData.accountType"
						style="width: 280px"
						multiple
						collapse-tags
						placeholder="默认选择全部"
						:popper-append-to-body="false"
						clearable
					>
						<el-option
							v-for="item in accountType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="变更类型:">
					<el-select
						v-model="queryData.applyType"
						style="width: 280px"
						multiple
						collapse-tags
						placeholder="默认选择全部"
						:popper-append-to-body="false"
						clearable
					>
						<el-option
							v-for="item in applyType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="操作人:" label-width="72px">
					<el-input
						v-model="queryData.applyName"
						v-symbols
						clearable
						size="medium"
						:maxlength="15"
						style="width: 210px"
						placeholder="请输入"
					></el-input>
				</el-form-item>
				<el-form-item style="margin-left: 10px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						查询
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						重置
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="view-container dealer-container">
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					style="width: 100%"
					:header-cell-style="getRowClass"
					@sort-change="_changeTableSort"
					highlight-current-row
				>
					<el-table-column
						prop="applyTime"
						align="center"
						label="操作时间"
						sortable="custom"
						width="200"
					>
						<template slot-scope="scope">
							{{ scope.row.applyTime || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						v-slot="scope"
						prop="userName"
						align="center"
						label="会员账号"
					>
						<Copy
							v-if="!!scope.row.userName"
							:title="scope.row.userName"
							:copy="copy"
						/>
						<span v-else>-</span>
					</el-table-column>
					<el-table-column align="center" label="账号类型">
						<template slot-scope="scope">
							<p>
								{{
									typeFilter(
										scope.row.accountType,
										'accountType'
									)
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						prop="applyType"
						align="center"
						label="变更类型"
					>
						<template slot-scope="scope">
							<p>
								{{
									typeFilter(scope.row.applyType, 'applyType')
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column align="center" label="变更前信息">
						<template slot-scope="scope">
							<template v-if="scope.row.applyType === '2'">
								{{
									typeFilter(
										scope.row.beforeModify,
										'genderType'
									)
								}}
							</template>
							<template v-else-if="scope.row.applyType === '6'">
								<span
									:class="
										beforeAccountStatus(
											scope.row.beforeModify
										).success === '正常'
											? 'normalRgba'
											: ''
									"
								>
									{{
										beforeAccountStatus(
											scope.row.beforeModify
										).success
									}}
								</span>
								<span
									:class="
										beforeAccountStatus(
											scope.row.beforeModify
										).fullExtraction === '充提锁定'
											? 'deleteRgba'
											: ''
									"
								>
									{{
										beforeAccountStatus(
											scope.row.beforeModify
										).fullExtraction
									}}
								</span>
								<span
									:class="
										beforeAccountStatus(
											scope.row.beforeModify
										).login === '登录锁定'
											? 'disableRgba'
											: ''
									"
								>
									{{
										beforeAccountStatus(
											scope.row.beforeModify
										).login
									}}
								</span>
								<span
									:class="
										beforeAccountStatus(
											scope.row.beforeModify
										).game === '游戏锁定'
											? 'lockingRgba'
											: ''
									"
								>
									{{
										beforeAccountStatus(
											scope.row.beforeModify
										).game
									}}
								</span>
							</template>
							<template v-else>
								{{ scope.row.beforeModify || '-' }}
							</template>
						</template>
					</el-table-column>
					<el-table-column align="center" label="变更后信息">
						<template slot-scope="scope">
							<template v-if="scope.row.applyType === '2'">
								{{
									typeFilter(
										scope.row.afterModify,
										'genderType'
									)
								}}
							</template>
							<template v-else-if="scope.row.applyType === '6'">
								<span
									:class="
										afterAccountStatus(
											scope.row.afterModify
										).success === '正常'
											? 'normalRgba'
											: ''
									"
								>
									{{
										afterAccountStatus(
											scope.row.afterModify
										).success
									}}
								</span>
								<span
									:class="
										afterAccountStatus(
											scope.row.afterModify
										).fullExtraction === '充提锁定'
											? 'deleteRgba'
											: ''
									"
								>
									{{
										afterAccountStatus(
											scope.row.afterModify
										).fullExtraction
									}}
								</span>
								<span
									:class="
										afterAccountStatus(
											scope.row.afterModify
										).login === '登录锁定'
											? 'disableRgba'
											: ''
									"
								>
									{{
										afterAccountStatus(
											scope.row.afterModify
										).login
									}}
								</span>
								<span
									:class="
										afterAccountStatus(
											scope.row.afterModify
										).game === '游戏锁定'
											? 'lockingRgba'
											: ''
									"
								>
									{{
										afterAccountStatus(
											scope.row.afterModify
										).game
									}}
								</span>
							</template>
							<template v-else>
								{{ scope.row.afterModify || '-' }}
							</template>
						</template>
					</el-table-column>
					<el-table-column align="center" label="提交信息">
						<template slot-scope="scope">
							{{ scope.row.applyInfo || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="applyName"
						align="center"
						width="100"
						label="操作人"
					>
						<template slot-scope="scope">
							{{ scope.row.applyName || '-' }}
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'

const end = () => dayjs()
	.endOf('day')
	.valueOf()
const start = () => dayjs()
	.startOf('day')
	.valueOf()
export default {
	name: routerNames.memberMsgChange,
	components: {},
	mixins: [list],
	data() {
		this.search = this.throttle(this.search, 1000)
		this.reset = this.throttle(this.reset, 1000)
		return {
			queryData: {
				userName: undefined,
				applyName: undefined,
				accountType: [],
				applyType: []
			},
			formTime: {
				time: [start(), end()]
			},
			dataList: [],
			title: ''
		}
	},
	computed: {
		accountType() {
			return this.globalDics.accountType || []
		},
		applyType() {
			return this.globalDics.applyType || []
		}
	},
	mounted() {},
	methods: {
		loadData() {
			const [startTime, endTime] = this.formTime.time || []
			let params = {
				...this.queryData,
				applyTimeStart: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				applyTimeEnd: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			if (!params.applyTimeStart || !params.applyTimeEnd) {
				this.$message({
					message: '操作时间参数必传',
					type: 'info'
				})
				return
			}
			params = {
				...this.getParams(params)
			}
			this.loading = true

			this.$api
				.memberDataInfoChangeRecord(params)
				.then((res) => {
					this.loading = false
					const { code, msg } = res
					if (res && code === 200) {
						const response = res.data
						this.dataList = response.record || []
						this.total = response.totalRecord || 0
					} else {
						this.loading = false
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		_changeTableSort({ column, prop, order }) {
			this.pageNum = 1
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderType
			}
			this.loadData()
		},
		reset() {
			this.queryData = {
				userName: undefined,
				applyName: undefined,
				accountType: [],
				applyType: []
			}
			this.pageNum = 1
			this.formTime.time = [start(), end()]
			this.loadData()
		},
		beforeAccountStatus(val) {
			const arr = val.split(',')
			let success = ''
			let fullExtraction = ''
			let login = ''
			let game = ''
			for (let i = 0; i < arr.length; i++) {
				const K = arr[i]
				if (K === '1') {
					success = '正常'
				} else if (K === '2') {
					fullExtraction = '充提锁定'
				} else if (K === '3') {
					login = '登录锁定'
				} else if (K === '4') {
					game = '游戏锁定'
				}
			}
			return { success, fullExtraction, login, game }
		},
		afterAccountStatus(val) {
			const arr = val.split(',')
			let success = ''
			let fullExtraction = ''
			let login = ''
			let game = ''
			for (let i = 0; i < arr.length; i++) {
				const K = arr[i]
				if (K === '1') {
					success = '正常'
				} else if (K === '2') {
					fullExtraction = '充提锁定'
				} else if (K === '3') {
					login = '登录锁定'
				} else if (K === '4') {
					game = '游戏锁定'
				}
			}
			return { success, fullExtraction, login, game }
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
</style>
